<template>
  <div class="login">
    <div class="title">
      <span v-text="title"></span>
    </div>
    <div class="input">
      <div class="input-item">
        <van-cell-group>
          <van-field v-model="userInfo.name"
                     label="用户名"
                     placeholder="请输入用户名" />
        </van-cell-group>
      </div>
      <div class="input-item">
        <van-cell-group>
          <!-- 允许输入正整数，调起纯数字键盘 -->
          <van-field v-model="password"
                     type="digit"
                     label="密码"
                     placeholder="请输入密码" />
        </van-cell-group>
      </div>
    </div>
    <van-button type="primary"
                @click="goLogin">登录</van-button>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, getCurrentInstance } from 'vue'
import { userStore } from '/@/store/modules/user'
import { useRouter } from 'vue-router'
import { v4 as uuid4 } from 'uuid'
export default defineComponent({
  setup() {
    const router = useRouter()
    console.log(import.meta.env.VITE_APP_SYSTEM_NAME)

    console.log(getCurrentInstance());
    
    const { ctx }: any = getCurrentInstance()

    const state = reactive({
      title: import.meta.env.VITE_APP_SYSTEM_NAME,
      password: '',
      userInfo: {
        name: '',
        age: 18,
      },
      token: uuid4(),
    })
    const goLogin = () => {
      if (!state.token) {
        return
      }
      if (!state.userInfo.name || !state.password) {
        ctx.$toast.fail('未输入')
        // return
      }
      userStore.store.dispatch('setToken', state.token)
      userStore.store.dispatch('setUserInfo', state.userInfo)
      console.log(userStore.store.state.user.userInfo)
      router.push('/')
    }
    return {
      goLogin,
      ...toRefs(state),
    }
  },
})
</script>

<style lang="less" scoped>
.login {
  background-color: rgb(27, 91, 134);
  height: 100vh;
  padding: 40% 10%;
  .title {
    text-align: center;
    font-size: 24px;
    color: white;
  }
  .input {
    margin: 20px 0;
  }
}
</style>